<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--    123
<div class="box">123</div>-->
    <header><!--大屏幕头部 头部-->
        <h1>数据可视化-echarts</h1>
        <div class="showTime"></div>
        <script>
            var t = null;
            t = setTimeout(time, 1000); //開始运行
            function time() {
                clearTimeout(t); //清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours(); //获取时
                var m = dt.getMinutes(); //获取分
                var s = dt.getSeconds(); //获取秒
                document.querySelector(".showTime").innerHTML =
                    "当前时间：" + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行
            }
        </script>
    </header><!--大屏幕头部 尾部-->
    <section class="mainbox">
        <div class="column"><!--左边第一个大框 头部-->
            <div class="panel bar">
                <h2>柱形图</h2>
                <div class="chart">
                    图表
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line">
                <h2>折线图</h2>
                <div class="chart">
                    图表
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie">
                <h2>饼图</h2>
                <div class="chart">
                    图表
                </div>
                <div class="panel-footer"></div>
            </div>
        </div><!--左边第一个大框 尾部-->
        <div class="column"><!--中间一个大框  头部-->

        </div><!--中间一个大框 尾部-->
        <div class="column"><!--右边第三个大框  头部-->
            <div class="panel bar">
                <h2>柱形图</h2>
                <div class="chart">
                    图表
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line">
                <h2>折线图</h2>
                <div class="chart">
                    图表
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie">
                <h2>饼图</h2>
                <div class="chart">
                    图表
                </div>
                <div class="panel-footer"></div>
            </div>
        </div><!--右边第三个大框 尾部-->
    </section>
    <script src="js/flexible.js"></script>
</body>
</html>
